<template>
  <div v-if="answeringState" class="cp-box moudle-a">
    <div class="video-box">
      <div id="local_stream"></div>
      <div id="remote_stream" ref="remote"></div>
    </div>
    <div class="video-control">
      <ul>
        <li><img alt="" src="../../assets/mini_accident/luzhi_on.gif"></li>
        <li>{{ videoCurTime }}</li>
      </ul>
      <ul>
        <li><img src="../../assets/mini_accident/jt.png" alt="" @click="prtScreenTap"></li>
        <li><img alt=""
                 :src="remoteMuted ? require('../../assets/mini_accident/audio_off.png'): require('../../assets/mini_accident/audio_on.png')"
                 @click="setMutedTap"></li>
        <li><img src="../../assets/mini_accident/quit.png" alt="" @click="quitRTCTap"></li>
      </ul>
    </div>
  </div>
  <div v-else class="cp-box moudle-a">
    <ul class="no-data">
      <li><img class="no-call" src="../../assets/mini_accident/no_callb.png" alt=""></li>
    </ul>
  </div>
</template>

<script>
import TRTCUtil from "@/util/TRTCUtil";
import WebSocketUtil from "@/util/WebSocketUtil";

// let loading;
// let imageInfoList = [];

export default {
  name: "ExpressCenterVideo",
  mixins: [],
  data() {
    return {
      videoCurTime: "",
      remoteMuted: false,
      isUpload: true
    };
  },
  computed: {
    answeringState() {
      return this.$store.state.MiniAccident.answeringState;
    },
    incomingMessage() {
      return this.$store.state.MiniAccident.incomingMessage;
    }
  },
  watch: {},
  mounted() {
    if (this.answeringState) {
      TRTCUtil.loginTRTC("local_stream", "remote_stream");
    }
  },
  beforeDestroy() {

  },
  methods: {
    quitRTCTap() { // 结束通话
      let that = this;
      WebSocketUtil.sendWebSocket({
        cmd: 6,
        msg: that.incomingMessage.callerId,
        groupId: that.incomingMessage.roomId
      });
      that.$store.dispatch("hangUpActions");
      TRTCUtil.logoutTRTC();
    },
    setMutedTap() {
      this.remoteMuted = !this.remoteMuted;
    },
    prtScreenTap() {
      // let that = this;
      TRTCUtil.snapshot();
      // let _remote = that.$refs.remote;
      // console.log("父节点---->", _remote);
      // console.log("子节点---->", _remote.firstChild);
      // console.log("孙子节点---->", _remote.firstChild.lastChild);
      /*
      loading = that.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
      });
      if (that.isUpload) {
          that.isUpload = false;
          let _remoteVideo = _remote.firstChild.lastChild;
          let canvas = document.createElement("canvas");
          canvas.width = 600;
          canvas.height = 1000;
          let canvasCtx = canvas.getContext("2d");
          _remoteVideo.addEventListener("canplay", function() {
              // _remoteVideo.removeEventListener("canplay", arguments.callee);
          });
          _remoteVideo.pause();
          canvasCtx.drawImage(_remoteVideo, 0, 0, 600, 1000, 0, 0, 600, 1000);
          let imgSrc = canvas.toDataURL("image/png");
          that.HttpConnection.post(that.Api.uploadBase64, {
              imageBase: imgSrc
          }).then(function(res) {
              imageInfoList.push({
                  imgPath: res.data.relativePath
              });
              that.$store.commit("setImageInfoList", imageInfoList);
              _remoteVideo.play();
              loading.close();
              that.isUpload = true;
              that.$message({
                  message: "截图成功！",
                  type: "success"
              });
          }).catch(function() {
              _remoteVideo.play();
              loading.close();
              that.isUpload = true;
          });
      } else {
          loading.close();
          that.$message({
              message: "截图太快, 请稍后",
              type: "error"
          });
      }*/
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/styles/callpolice';

.video-box {
  width: 560px;
  height: 357px;
  position: relative;
  overflow: hidden;
}

#local_stream {
  width: 150px;
  height: 200px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}

#remote_stream {
  width: 244px;
  height: 357px;
  display: flex;
  flex-direction: row;
  margin: 0px 158px;
}

.video-control {
  width: 560px;
  height: 43px;
  box-sizing: border-box;
  padding: 0px 20px 0px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #131313;

  ul {
    display: flex;
    flex-direction: row;
    align-items: center;

    li {
      color: #ffffff;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.no-data {
  height: 400px;

  .no-call {
    width: 370px;
    height: 258px;
  }
}
</style>
